@require '~styles/variables'
@require '~styles-lib/mixins'

.-community-container
	clearfix()
	full-bleed-xs()
	rounded-corners-lg()
	position: relative
	margin-bottom: $line-height-computed
	overflow: hidden
	padding: 10px 15px
	elevate-0()

	&:hover
		elevate-2()

.-header
	position: absolute
	top: 0
	left: 0
	width: 100%
	height: 100%
	z-index: 0

	img
		display: block
		width: 100%
		height: 100%
		mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0))

.-content
	position: relative
	z-index: 1
	display: flex
	align-items: center

.tag
	// This makes all the text align at the left.
	margin-left: -4px

.-name
	font-weight: bolder
	font-size: $font-size-h4

.-thumbnail
	width: 50px
	height: 50px
	background-color: var(--theme-white)
	border-radius: 50%
	padding: 2px
	margin-right: ($grid-gutter-width / 4)

	img
		display: block
		width: 100%
		height: 100%
		img-circle()

.-member-count
	font-size: $font-size-small
